<template>
  <view class="pageContent">
    <view class="memberMain">
      <view class="memberItem">
        <view class="memberItTi">成员真名</view>
        <view class="memberItVa">{{formData.name || '成员真名'}}</view>
      </view>
      <view class="memberItem">
        <view class="memberItTi">成员身份</view>
        <view class="memberItVa">{{formData.roleName || ''}}</view>
      </view>
      <view class="memberItem">
        <view class="memberItTi">身份证号</view>
        <view class="memberItVa">{{formData.idCardNumber || ''}}</view>
      </view>
      <view class="memberItem">
        <view class="memberItTi">出生年月</view>
        <view class="memberItVa">{{formData.birthday || ''}}</view>
      </view>
      <view class="memberItem">
        <view class="memberItTi">性<text style="color: #fff;">性别</text>别</view>
        <view class="memberItVa">{{formData.sex==0 ? '男':'女'}}</view>
      </view>
      <view class="memberItem">
        <view class="memberItTi">手机号码</view>
        <view class="memberItVa">{{formData.telephone || ''}}</view>
      </view>
      <view class="memberItem">
        <view class="memberItTi">门禁期限</view>
        <view class="memberItVa">{{formData.expireDate || '永久有效'}}</view>
      </view>
      <view class="memberItem" v-if="formData.idCardFrontUrl || formData.idCardBackUrl">
        <view class="memberItTi">证件照片</view>
        <view class="memberUpload">
          <image class="memberUpTrueIc" v-if="formData.idCardFrontUrl" :src="formData.idCardFrontUrl"
            @click="showPhoto(formData.idCardFrontUrl)" />
          <image class="memberUpTrueIc" v-if="formData.idCardBackUrl" :src="formData.idCardBackUrl"
            @click="showPhoto(formData.idCardBackUrl)" />
        </view>
      </view>
      <view class="memberItem"
        v-if="formData.leaseContractOneUrl || formData.leaseContractTwoUrl || formData.leaseContractThreeUrl || formData.leaseContractFourUrl">
        <view class="memberItTi">租赁合同</view>
        <view class="memberUploadLea">
          <image class="memberUpLeaMa" v-if="formData.leaseContractOneUrl" :src="formData.leaseContractOneUrl"
            @click="showPhoto(formData.leaseContractOneUrl)" />
          <image class="memberUpLeaMa" v-if="formData.leaseContractTwoUrl" :src="formData.leaseContractTwoUrl"
            @click="showPhoto(formData.leaseContractTwoUrl)" />
          <image class="memberUpLeaMa" v-if="formData.leaseContractThreeUrl" :src="formData.leaseContractThreeUrl"
            @click="showPhoto(formData.leaseContractThreeUrl)" />
          <image class="memberUpLeaMa" v-if="formData.leaseContractFourUrl" :src="formData.leaseContractFourUrl"
            @click="showPhoto(formData.leaseContractFourUrl)" />
        </view>
      </view>
      <view class="memberItem" v-if="formData.applyReason">
        <view class="memberItTi">留<text style="color: #fff;">性别</text>言</view>
        <view class="memberItVa">{{formData.applyReason}}</view>
      </view>
      <view class="memberItem" v-if="formData.message">
        <view class="memberItTi">审批意见</view>
        <view class="memberItVa">{{formData.message}}</view>
      </view>
    </view>

    <view class="memberHouse" v-if="formData.roomInfo">
      <view class="">关联房屋</view>
      <view class="memberHouseRi">{{formData.roomInfo+'-'+formData.roomName}}</view>
    </view>

  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import config from '../../../../static/config.js'
  import util from '../../../../static/utils/util.js'
  export default {
    data() {
      return {
        images: config.images,
        localImages: config.localImages,
        password: '',
        headList: [{
            value: 1,
            name: '租户',
          },
          {
            value: 2,
            name: '父母',
          },
          {
            value: 3,
            name: '小孩',
          },
          {
            value: 3,
            name: '朋友',
          },
        ],
        headIndex: -1,
        perList: [{
            value: 1,
            name: '男',
          },
          {
            value: 2,
            name: '女',
          },
        ],
        perIndex: 0,
        formData: {
          name: "",
          date: "",
          dateLim: "",
          housename: "房屋1",
        },
        placeholder: '请填写与身份证上的姓名一致',
        placeholder2: '请填写与身份证号出身年月一致',
        placeholder3: '请填写出生地',
        placeholder4: '请填写手机号',
        placeholder5: '请选择门禁期限',
        date: '',
        dateLim: '',
      }
    },
    computed: {
      ...mapState({
        myInfo: state => state.user.myInfo
      })
    },
    onLoad(options) {
      var title = '成员详情'
      this.id = options.id || 289;
      this.type = options.type || 0;
      if (this.type == 1) {
        var title = '审批详情'
      }
      wx.setNavigationBarTitle({
        title: title
      })
      if (options.json) {
        var json = JSON.parse(options.json)
        console.warn('json', json)
        this.urlContact(json)

      } else {
        this.approva();
      }
      // var url="http://192.168.0.246:9000/picture/owner/2021-04-21/1619006106555.jpg"
      // this.showPhoto(url);
    },
    onShow() {
      util.socketTest();
    },
    onUnload() {
      //清空数据
      this.formData = {}
    },
    methods: {
      showPhoto(...url) {
        console.warn('showPhoto', url)
        wx.previewImage({
          current: '', // 当前显示图片的http链接
          urls: url // 需要预览的图片http链接列表
        })
      },
      //拼接图片地址
      getFullPath(url) {
        return config.IMAGE_APIHOST + url;
      },

      approva() {
        var params = {
          roomApplyId: this.id,
        }
        util.wxRequestPro('/UserServer/owner/info/approva', params)
          .then((res) => {
            console.warn('approva', res)
            var json = res.param;
            this.formData = json;
            // this.urlContact(json)
          })
      },

      urlContact(json) {
        if (json.idCardFrontUrl) {
          // json.idCardFrontUrl=getFullPath(json.idCardFrontUrl);
          json.idCardFrontUrl = config.IMAGE_APIHOST + json.idCardFrontUrl;
        }
        if (json.idCardBackUrl) {
          json.idCardBackUrl = config.IMAGE_APIHOST + json.idCardBackUrl;
        }
        if (json.leaseContractOneUrl) {
          json.leaseContractOneUrl = config.IMAGE_APIHOST + json.leaseContractOneUrl;
        }
        if (json.leaseContractTwoUrl) {
          json.leaseContractTwoUrl = config.IMAGE_APIHOST + json.leaseContractTwoUrl;
        }
        if (json.leaseContractThreeUrl) {
          json.leaseContractThreeUrl = config.IMAGE_APIHOST + json.leaseContractThreeUrl;
        }
        if (json.leaseContractFourUrl) {
          json.leaseContractFourUrl = config.IMAGE_APIHOST + json.leaseContractFourUrl;
        }
        this.formData = json;
      },

    }
  }
</script>

<style lang="stylus" scoped>
  .pageContent {
    height: 100vh;
    background: #F3F6F9;
    padding: 20rpx 0rpx 0rpx 0rpx;
  }

  .memberMain {
    background-color: #FFFFFF;
    padding: 30rpx 30rpx 20rpx 30rpx;
  }

  .memberItem {
    display: flex;
    font-size: 30rpx;
    padding: 0rpx 0rpx 20rpx 0rpx;
  }

  .memberItTi {
    width: 130rpx;
    color: #333333;
    margin-right: 40rpx;
    text-align: justify;
    white-space: nowrap;
  }

  .memberItVa {
    color: #666666;
  }

  .memberRight {
    display: flex;
    height: 90rpx;
    width: 100%;
    align-items: center;
    border-bottom: 1rpx solid #E7E7E7;
  }

  .memberItIn {
    width: 88%;
  }

  .memberItIc {
    width: 35rpx;
    height: 30rpx;

    margin: 0rpx 10rpx 0rpx 20rpx;
  }

  .perType {
    display: inline-block;
    width: 90rpx;
    height: 45rpx;
    line-height: 45rpx;
    border-radius: 4rpx;
    text-align: center;
    margin-right: 20rpx;
    color: $primary;
    border: 1rpx solid $primary;
  }

  .perType.select {
    background-color: $primary;
    color: #FFFFFF;
  }

  .memberUpload {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .memberUpTrueIc {
    display: inline-block;
    vertical-align: top;
    width: 230rpx;
    height: 152rpx;
  }

  .memberUploadLea {
    display: flex;
    width: 100%;
    padding: 20rpx 0rpx 20rpx 0rpx;
  }

  .memberUpLeaMa {
    display: inline-block;
    width: 124rpx;
    height: 84rpx;
  }

  .memberUpLeaMa:nth-child(n+2) {
    margin-left: 8rpx;
  }

  .memberUpLea {
    display: inline-block;
    width: 124rpx;
    height: 84rpx;
  }

  .comePicRight {
    position: relative;
    display: flex;
    height: 90rpx;
    width: 100%;
    align-items: center;
    border-bottom: 1rpx solid #E7E7E7;
  }

  .comePicLim {
    position: absolute;
    right: 10rpx;
    top: 26rpx;
    width: 35rpx;
    height: 30rpx;

    margin: 0rpx 10rpx 0rpx 0rpx;
  }

  .btOne {
    margin: 40rpx 0rpx 0rpx 0rpx;
  }

  .memberHouse {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #fff;
    margin: 20rpx 0rpx 0rpx 0rpx;
    padding: 30rpx 30rpx 30rpx 30rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
  }

  .memberHouseRi {
    max-width: 480rpx;
  }
</style>
